{% extends 'base.html' %}
{% load static %}
{% load bootstrap3 %}
{% load i18n %}
{% load common_tags %}
{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="panel-options">
                        <ul class="nav nav-tabs">
                            <li>
                                <a href="{% url 'settings:basic-setting' %}" class="text-center"><i class="fa fa-cubes"></i> {% trans 'Basic setting' %}</a>
                            </li>
                            <li>
                                <a href="{% url 'settings:email-setting' %}"  class="text-center"><i class="fa fa-envelope"></i> {% trans 'Email setting' %} </a>
                            </li>
                            <li>
                                <a href="{% url 'settings:email-content-setting' %}"  class="text-center"><i class="fa fa-file-text"></i> {% trans 'Email content setting' %} </a>
                            </li>
                            <li class="active">
                                <a href="{% url 'settings:ldap-setting' %}" class="text-center"><i class="fa fa-archive"></i> {% trans 'LDAP setting' %} </a>
                            </li>
                            <li>
                                <a href="{% url 'settings:terminal-setting' %}" class="text-center"><i class="fa fa-hdd-o"></i> {% trans 'Terminal setting' %} </a>
                            </li>
                            <li>
                                <a href="{% url 'settings:security-setting' %}" class="text-center"><i class="fa fa-lock"></i> {% trans 'Security setting' %} </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="col-sm-12" style="padding-left:0">
                                <div class="ibox-content" style="border-width: 0;padding-top: 40px;">
                                    <form action="" method="post" class="form-horizontal">
                                    {% if form.non_field_errors %}
                                         <div class="alert alert-danger">
                                             {{ form.non_field_errors }}
                                         </div>
                                    {% endif %}
                                    {% csrf_token %}
                                    {% for field in form %}
                                        {% if not field.field|is_bool_field %}
                                            {% bootstrap_field field exclude='AUTH_LDAP_GROUP_TYPE_STRING,AUTH_LDAP_GROUP_TYPE_STRING_ATTR' layout="horizontal" %}
                                            {% if field.name == 'AUTH_LDAP_GROUP_TYPE_STRING' %}
                                                <div class="form-group">
                                                    <label for="{{ field.id_for_label }}" class="col-bg-3 col-md-3 col-sm-4 col-xs-4 control-label">{{ field.label }}</label>
                                                    <div class="col-bg-8 col-md-7 col-sm-7 col-xs-8">
                                                        <div class="input-group">
                                                            <span class="glyphicon glyphicon-chevron-down" style="position: absolute; z-index: 1020; right: 145px; top: 12px;"></span>
                                                            {{ field }}
                                                            <div class="input-group-btn">
                                                                {{form.AUTH_LDAP_GROUP_TYPE_STRING_ATTR}}
                                                            </div>
                                                        </div>
                                                        <span class="" >{{ field.help_text }}</span>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% else %}
                                            <div class="form-group">
                                                <label for="{{ field.id_for_label }}" class="col-bg-3 col-md-3 col-sm-4 col-xs-4 control-label">{{ field.label }}</label>
                                                <div class="col-bg-8 col-md-7 col-sm-7 col-xs-8">
                                                    <div class="checkbox">
                                                        <label>
                                                            {{ field }}
                                                            <span class="" >{{ field.help_text }}</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <div class="text-center">
                                            <button class="btn btn-default" type="reset"> {% trans 'Reset' %}</button>
                                            <button id="submit_button" class="btn btn-primary" type="submit">{% trans 'Submit' %}</button>
                                            <button class="btn btn-default" type="button" data-toggle="modal" href='#modal-id'> {% trans 'Test connection' %}</button>
                                        </div>
                                    </div>
                                    </form>
                                    <div class="modal fade" id="modal-id">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <a class="close" data-dismiss="modal" aria-hidden="true">{% bootstrap_icon "glyphicon glyphicon-remove-circle" %}</a>
                                                    <h4 class="modal-title">{% trans 'Test LDAP User Connect' %}</h4>
                                                </div>
                                                <div class="modal-body form-horizontal">
                                                    <form id='ldap_test' action="" method="post" >
                                                        {% csrf_token %}
                                                        {% for field in form_user %}
                                                            {% bootstrap_field field size='medium' label_class='col-md-4' field_class='col-md-7' layout="horizontal" %}
                                                        {% endfor %}
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-sm btn-primary btn-test">{% trans 'Test Connect' %}</button>
                                                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">{% trans 'Close' %}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block custom_foot_js %}
<script>
$(document).ready(function () {
    $("#ldap_test").submit(function() {
        return false;
    })
})
.on("click", ".btn-test", function () {
    var data = {};
    var form = $("#ldap_test").serializeArray();
    $.each(form, function (i, field) {
        data[field.name] = field.value;
        $("#id_"+field.name).closest('.form-group').removeClass('has-error')
    });
    var the_url = "{% url 'api-settings:ldap-testing' %}";
    function error(message) {
        fmt_err_msg=$.parseJSON(message)
        if (fmt_err_msg.error){
            if(typeof(fmt_err_msg.error) == "object"){
                for(key in fmt_err_msg.error){
                    $("#id_"+key).closest('.form-group').addClass('has-error')
                    toastr.error(`${key.replace('AUTH_LDAP_','')},${fmt_err_msg.error[key]}`)
                }
            }else{
                toastr.error(fmt_err_msg.error)
            }
        }else{
            toastr.error(message)
        }
    }
    function success(message) {
        toastr.success(message.msg)
    }
    requestApi({
        url: the_url,
        body: JSON.stringify(data),
        method: "POST",
        flash_message: false,
        success: success,
        error: error
    });
})
</script>
{% endblock %}